<!--
 * @Author: your name
 * @Date: 2021-03-28 12:46:47
 * @LastEditTime: 2021-04-30 00:08:12
 * @LastEditors: Please set LastEditors
 * @Description: 简单banner
 * @FilePath: /medicine-web/src/views/main/search/components/bannerSimple.vue
-->
<template>
  <div class="simple-banner-container">
    <div class="main-banner">
      <div class="main-banner-search">
        <a-row class="banner-search">
          <a-col :span="4" style="height: 100%">
            <customSelect :tabName="'全部'" :selection="tabList" @handleSelect="handleMenuClick"></customSelect>
          </a-col>
          <a-col :span="20" style="height: 100%">
            <customInput class="banner-search-input" v-model="ruleForm.keywords" :placeholderStr="'请输入您想要搜索的内容'" @handleEnter="searchFun">
              <img slot="iconSuffix" :src="require('@/assets/image/search.png')" alt="" class="icon-search" @click.stop="searchFun">
            </customInput>
          </a-col>
        </a-row>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
import customSelect from '@/components/CustomSelect/index.vue'
import customInput from '@/components/CustomInput/index.vue'
import { mapGetters } from 'vuex'
import { SYSTEM_MODULE } from '@/utils/dict'
export default {
  name: 'simpleBanner',
  components: { customSelect, customInput },
  data () {
    return {
      tabList: [],
      tabName: '全部',
      ruleForm: {
        keywords: ''
      },
    }
  },
  methods: {
    handleEnterFun (rawData) {
      console.log('handleEnterFun', rawData)
    },
    searchFun () {
      console.log('233333333333333333333333, searchFun')
      switch (this.tabName) {
        case '全部':
          this.$router.push('/simple/search/document')
        break;
        case '文献集锦':
          this.$router.push('/complex/document')
        break;
        case '临床试验':
          this.$router.push('/clinical/index')
        break;
        case '会议进展':
          this.$router.push('/meeting/index')
        break;
        case '药企资讯':
          this.$router.push('/realinfo/index')
        break;
        case '材料总结':
          this.$router.push('/summary/index')
        break;
        case 'Q&A':
          this.$router.push('/qanda/index')
        break;
        default:
          this.$router.push('/simple/search/document')
        break;
      }
      console.log('filterMap++++++++++++', this.filterMap)
      let filter = JSON.parse(JSON.stringify(this.filterMap))
      filter.keywords = this.ruleForm.keywords
      console.log('filter', filter)
      this.$action('setFilter', filter)
      this.$action('setSearchValue', this.ruleForm.keywords)
      this.$action('resetCurrentTab')
    },
    handleMenuClick (e) {
      console.log('handleMenuClick', e)
      this.tabName = e.key
    },
  },
  watch: {
    'ruleForm.keywords': function (val, oldVal) {
      this.$action('setSearchValue', val)
    }
  },
  mounted () {
    this.ruleForm.keywords = this.searchValue
    for (const item in SYSTEM_MODULE) {
      this.tabList.push({
        id: item,
        name: SYSTEM_MODULE[item]
      })
    }
  },
  computed: {
    ...mapGetters({
      filterMap: 'filterMap',
      searchValue: 'searchValue'
    })
  },
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
@import '~@/assets/styles/common.scss';
.main-banner {
  width: 100%;
  height: 455px;
  background-image: url('./../../../../assets/image/banner.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  .main-banner-search {
    position: absolute;
    top: 319px;
    width: 1086px;
    left: calc(50% - 543px);
    height: 281px;
    .banner-search {
      width: 100%;
      height: 57px;
      background-color: #fff;
      border-radius: 5px;
      padding: 0px 13px;
      .banner-search-input {
        border: none;
        font-size: 16px;
        /deep/ .input-pattern {
          width: 95%;
        }
        .icon-search {
          width: 28px;
          height: 33px;
          cursor: pointer;
        }
      }
    }
    .total-count-container {
      padding-top: 36px;
      .total-count__title {
        font-weight: bold;
        color: #fdfdfd;
      }
      .total-count__inner {
        font-weight: 400;
        color: #fdfdfd;
        font-size: 1em;
      }
    }
  }
}
</style>